<template>
	<view>
		<view class="listBox" v-for="(item,index) in topListData" :key='index' @click="goSongList(item.id)">
			<block v-if="index <=6">
			<view class="image-text" style="margin: 5%;">
				<view class="text">
					<text>{{item.name}}</text>
				</view>
				<view class="image">
					<image :src="item.coverImgUrl" mode=""></image>
				</view>
			</view>
			</block>
		</view>
		<!-- // 底部播放器 -->
		<text>\n\n\n\n\n\n</text>
		<view class="zaudio" v-show="paused !== true ">
			<my-zaudio theme="theme3" ref='a'></my-zaudio>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				topListData:[]
			}
		},
		created() {
			this.getTopList()
		},
		methods: {
			async getTopList(){
				const {data:res} = await this.$request({
					url:'/toplist',
					
				})
				if(res.code === 200){
					this.topListData = res.list
					console.log(res)
				}
				
			},
			goSongList(id){
				uni.navigateTo({
					url:'/pages/find/pages/topSongList/topSongList?id=' + id,
				})
			}
		},computed:{
			...mapGetters(['paused'])
		}
	}
</script>

<style scoped>
.image image{
	width: 150upx;
	height: 150upx;
}
.listBox{
	
	background-color: #aaaaff;
}
</style>
